
import './daily_charges_chart.scss'

import React, { useEffect, useState } from 'react';

//arcoD
import { Tabs, Typography, DatePicker, Descriptions, Statistic } from '@arco-design/web-react';

//echarts
import HistogramChart from '../../../../../../components/report/histogramChart'
import MyLineChart from '../../../../../../components/report/lineChart';
import MyChartRight from '../../../../../../components/report/pieChart'

//接口
import { getTradeOfMoney, getLeaderboard } from '../../../../../../utils/api'

import DailyChargesTable from '../daily_charges_table/daily_charges_table'

const DailyChargesChart = () => {

    //排行榜

    const [dailyChargeDataRank, setDailyChargeDataRank] = useState([{
        label: 'Name',
        value: 'Socrates',
    },
    {
        label: 'Mobile',
        value: '123-1234-1234',
    },
    {
        label: 'Residence',
        value: 'Beijing',
    },
    {
        label: 'Hometown',
        value: 'Beijing',
    },
    {
        label: 'Address',
        value: 'Yingdu Building, Zhichun Road, Beijing',
    },])

    const showDailyChargesRank = () => {
        getLeaderboard().then(res => {
            console.log('柱状图', res);
            setDailyChargeDataRank(res.result)
        })
    }

    //标签
    const TabPane = Tabs.TabPane;
    const style = {
        textAlign: 'center',
        marginTop: 20,
    };

    useEffect(() => {
        getLeaderboard().then(res => {
            console.log('排行榜', res);
        })

        showDailyChargesRank()
    }, [])

    return <div className='charts'>
        <div className='charts_top'>
            <Tabs
                defaultActiveTab='1'
                extra={
                    <DatePicker style={{ width: '75%' }} />
                } >
                <TabPane key='1' title='统计图'>
                    <Typography.Paragraph style={style}>
                        <div className='transactions_charts'>
                            <div className='trading_volume_trends'>
                                <p>交易额趋势</p>
                                {/* 交易额柱状图 */}
                                <HistogramChart />
                            </div>

                            <div className='ranking_of_parking_lot_kiosks'>
                                <p>停车场岗亭排名</p>
                                <div>
                                    <Descriptions
                                        column={1}
                                        data={dailyChargeDataRank}
                                        style={{ marginBottom: 20 }}
                                        labelStyle={{ paddingRight: 36 }}
                                    />
                                </div>
                            </div>
                        </div>

                        <div className='charts_bottom'>
                        <div className='bigLeft'>
                            {/* 折线统计图 */}
                            <p>交易额趋势</p>
                            <div className='titofChart'>
                                <Statistic title='Downloads' value={125670} groupSeparator style={{ marginRight: 60 }} />
                                <Statistic extra='Comments' value={40509} groupSeparator precision={2} />
                                <Statistic title='Downloads' value={125670} groupSeparator style={{ marginLeft: 60 }} />
                            </div>
                            <div className='chart1'>
                                <MyLineChart />
                            </div>

                        </div>

                        {/* 饼状统计图 */}
                        <div className='bigright'>
                            <div className='chart2'>
                                <MyChartRight />
                            </div>
                        </div>
                    </div>
                    </Typography.Paragraph>
                </TabPane>
                <TabPane key='2' title='表格'>
                    <Typography.Paragraph style={style}>
                        <DailyChargesTable />
                    </Typography.Paragraph>
                </TabPane>
            </Tabs>
        </div>

    </div>
}

export default DailyChargesChart